1. Using HTML header tags h1 to h3

Headers h1 through h6 are available as normal:

<h1>Bootstrap 5 test: h1 </h1>
<h2>Bootstrap 5 test: h2 </h2>
<h3>Bootstrap 5 test: h3 </h3>

result:

Bootstrap 5: test h1

Bootstrap 5: test h2

Bootstrap 5: test h3

2. Using classes to emulate h1 to h6

Headers h1 through H6 are available as classes as well:

<p class="h1">Bootstrap test: class h1 </p>
<p class="h2">Bootstrap test: class h2 </p>
<p class="h3">Bootstrap test: class h3 </p>

result:

Bootstrap test: class H1

Bootstrap test: class H2

Bootstrap test: class H3

3. Using display headings for nicer headers

<h1 class="display-1"> class="display-1"  </h1>
<h1 class="display-2"> class="display-2"  </h1>
<h1 class="display-3"> class="display-3"  </h1>
<h1 class="display-4"> class="display-4"  </h1>
<h1 class="display-5"> class="display-5"  </h1>
<h1 class="display-6"> class="display-6"  </h1>

result:

class="display-1"

class="display-2"

class="display-3"

class="display-4"

class="display-5"

class="display-6"

4. Using lead text and alignment

<p>Plain text</p>
<p class="lead">Text aligned left </p>
<p class="lead text-center">Text aligned center</p>
<p class="lead text-end">Text aligned right</p>

result:

Plain text

Text aligned left

Text aligned center

Text aligned right

5. Using text decoration and font weight

<p>Plain text</p>
<p class="text-decoration-underline">This is underlined</p>
<p class="text-decoration-line-through">This is line through text</p>
<p class="fx-bold">This is bold</p>
<small>This is small</small>

result:

Plain text

This is underlined

This is line through text

This is bold

This is small

6. Using text Color and background - Theme colors

<p class="text-primary">theme color primary </p>
<p class="text-secondary">theme color secondary </p>
<p class="text-info">theme color info </p>
<p class="text-warning">theme color warnining </p>
<p class="text-success">theme color success</p>
<p class="text-danger">theme color danger</p>
<p class="text-muted">theme color muted</p>
<p class="text-white bg-primary">Text white background primary </p>
<p class="text-white bg-secondary">Text white background secondary </p>
<p class="text-light bg-danger">Text white background secondary </p>

result:

theme color primary

theme color secondary

theme color info

theme color warnining

theme color success

theme color danger

theme color muted

Text white background primary

Text white background secondary

7. Using buttons

<button class="btn btn-primary">primary button</button>
<button class="btn btn-secondary">secondary button</button>
<br><br>
<button class="btn btn-lg btn-danger">Large danger button</button>
<br><br>
<button class="btn btn-sm btn-warning">Small warning button</button>
<br><br>
<button class="btn btn-outline-primary">primary  outline button</button>
<button class="btn btn-outline-secondary">secondary outline button</button>
<br><br>

<p>anchor tag buttons:</p>        
<a href="#" class="btn btn-info">Info anchor tag</a>
<a href="#" class="btn btn-success">Success anchor tag</a>
<a href="#" class="btn btn-warning">Warning anchor tag</a>
<br><br>

<p>button group:</p>        

<div class="btn-group">
    <a href="#" class="btn btn-info">Info anchor tag</a>
    <a href="#" class="btn btn-success">Success anchor tag</a>
    <a href="#" class="btn btn-warning">Warning anchor tag</a>
</div>

result:

buttons:

anchor tag buttons:

Info anchor tag Success anchor tag Warning anchor tag

button group:

Info anchor tag Success anchor tag Warning anchor tag

8. Using margins and padding

<div class="bg-primary m-1 p-1">small margin and padding (m-1 p-1)</div>
<div class="bg-primary m-3 p-3">medium margin and padding (m-3 p-3)</div>
<div class="bg-primary m-5 p-5">large margin and padding (m-5 p-5)</div>
<div class="bg-primary mx-5 py-3">margin - horizontal and vertical (x-5 y-3)</div>
<div class="bg-primary mt-5  mb-5">margin - top and bottom (mt-5 mb-5)</div>
<div class="bg-primary mt-3  mb-4 ms-5 me-1 ps-5 pt-4 pe-2 pb-1">distinct margin and padding top bottom, start and end</div>

result:

small margin and padding (m-1 p-1)

medium margin and padding (m-3 p-3)

large margin and padding (m-5 p-5)

margin - horizontal and vertical (x-5 y-3)

margin - top and bottom (mt-5 mb-5)

distinct margin and padding top bottom, start and end

9. Borders

<div class="m-3 p-3 border">default border</div>
<div class="m-3 p-3 border-start border-end border-3">individual borders and border width</div>
<div class="m-3 p-3 border border-success border-3">border colors</div>
<div class="m-3 p-3 border rounded border-5">border rounded</div>
<div class="m-3 p-3 border rounded-pill border-5">border rounded -  pill shape</div>
<div class="m-3 p-3 border rounded-circle border-5">border rounded -  circle shape</div>

result:

default border

individual borders and border width

border colors

border rounded

border rounded - pill shape

border rounded - circle shape

10. Box Shadow

<div class="m-3 p-3 shadow-sm">small box shadow</div>
<div class="m-3 p-3 shadow">default box shadow</div>
<div class="m-3 p-3 shadow-lg">large box shadow</div>

result:

small box shadow

default box shadow

large box shadow

11. Font weight and font style

<div class="fw-bolder">font weight bolder</div>
<div class="fw-bold">font weight bold</div>    
<div>default text </div>
<div class="fw-light">font weight light</div>
<div class="fst-italic">font style italic</div>
<div class="fst-italic fw-light">font weight light + style italic</div>

result:

font weight bolder

font weight bold

default text

font weight light

font style italic

font weight light + style italic

12. Containers

<div class="container border">
<p class="h5">Normal container with border</p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rem ullam dolores est facere sequi, molestiae nulla non pariatur at, iure hic quis, consequuntur ut nisi in sit corporis cupiditate deserunt qui vitae provident? Aspernatur facilis, quae consectetur officiis inventore qui eos incidunt, reprehenderit soluta aut, hic sapiente consequuntur!
</div>

<br>
<div class="container-fluid border">
<p class="h5">Fluid container - 100% of width - with border </p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rem ullam dolores est facere sequi, molestiae nulla non pariatur at, iure hic quis, consequuntur ut nisi in sit corporis cupiditate deserunt qui vitae provident? Aspernatur facilis, quae consectetur officiis inventore qui eos incidunt, reprehenderit soluta aut, hic sapiente consequuntur!
</div>

<br>
<div class="container-lg my-5 border">
<p class="h5">Container with margin and border - stops stretching as screen grows large</p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rem ullam dolores est facere sequi, molestiae nulla non pariatur at, iure hic quis, consequuntur ut nisi in sit corporis cupiditate deserunt qui vitae provident? Aspernatur facilis, quae consectetur officiis inventore qui eos incidunt, reprehenderit soluta aut, hic sapiente consequuntur!
</div>

<br>
<div class="container-xl my-5 border">
<p class="h5">Container with margin and border - stops stretching as screen grows very large</p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rem ullam dolores est facere sequi, molestiae nulla non pariatur at, iure hic quis, consequuntur ut nisi in sit corporis cupiditate deserunt qui vitae provident? Aspernatur facilis, quae consectetur officiis inventore qui eos incidunt, reprehenderit soluta aut, hic sapiente consequuntur!
</div>


<div class="container p-5 my-5 bg-dark text-white">
<p class="h5">Padding 5, Margin 5, dark background with white text</p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rem ullam dolores est facere sequi, molestiae nulla non pariatur at, iure hic quis, consequuntur ut nisi in sit corporis cupiditate deserunt qui vitae provident? Aspernatur facilis, quae consectetur officiis inventore qui eos incidunt, reprehenderit soluta aut, hic sapiente consequuntur!
</div>

<div class="container p-5 my-5 bg-primary text-white">
<p class="h5">Padding 5, Margin 5, primary background with white text</p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rem ullam dolores est facere sequi, molestiae nulla non pariatur at, iure hic quis, consequuntur ut nisi in sit corporis cupiditate deserunt qui vitae provident? Aspernatur facilis, quae consectetur officiis inventore qui eos incidunt, reprehenderit soluta aut, hic sapiente consequuntur!
</div>

result:

Normal container with border

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rem ullam dolores est facere sequi, molestiae nulla non pariatur at, iure hic quis, consequuntur ut nisi in sit corporis cupiditate deserunt qui vitae provident? Aspernatur facilis, quae consectetur officiis inventore qui eos incidunt, reprehenderit soluta aut, hic sapiente consequuntur!

Fluid container - 100% of width - with border

Container with margin and border - stops stretching as screen grows large

Padding 5, Margin 5, dark background with white text

Padding 5, Margin 5, primary background with white text

13 Grids and Layout

13-A. Simple grid

<div class="container-lg my-5">
    
    <div class="row">
        <div class="col-sm-4 col-lg-6 bg-light border">small screen 4 columns, large screen 6 columns</div>
        <div class="col-sm-4 col-lg-3 bg-light border">small screen 4 columns, large screen 3 columns</div>
        <div class="col-sm-4 col-lg-3 bg-light border">small screen 4 columns, large screen 3 columns</div>
    </div>
  
    <div class="row">
        <div class="col-sm-4 col-lg-6 bg-light border">Col 1</div>
        <div class="col-sm-4 col-lg-3 bg-light border">Col 2</div>
        <div class="col-sm-4 col-lg-3 bg-light border">Col 3</div>
    </div>
  
    <div class="row">
        <div class="col-sm-4 col-lg-6 bg-light border">Col 1</div>
        <div class="col-sm-4 col-lg-3 bg-light border">Col 2</div>
        <div class="col-sm-4 col-lg-3 bg-light border">Col 3</div>
    </div>
  
</div>

result:

One of three columns

13-B. Grid with fluid container

    <div class="container-fluid">
    <div class="row">
        <div class="col-md border">
            One of three columns
        </div>
        <div class="col-md border">
            One of three columns
        </div>
        <div class="col-md border">
            One of three columns
        </div>
    </div>
    <div class="row">
        <div class="col-md border">
            One of three columns
        </div>
        <div class="col-md border">
            One of three columns
        </div>
        <div class="col-md border">
            One of three columns
        </div>
    </div>
    </div>

result:

One of three columns

13-C. Grids - responsive column widths

Note how first column will shrink from 6 to 4 columns on smaller screen

<div class="container-lg my-5">
    
    <div class="row">
        <div class="col-sm-4 col-lg-6 bg-light border">small screen 4 columns, large screen 6 columns</div>
        <div class="col-sm-4 col-lg-3 bg-light border">small screen 4 columns, large screen 3 columns</div>
        <div class="col-sm-4 col-lg-3 bg-light border">small screen 4 columns, large screen 3 columns</div>
    </div>
  
    <div class="row">
        <div class="col-sm-4 col-lg-6 bg-light border">Col 1</div>
        <div class="col-sm-4 col-lg-3 bg-light border">Col 2</div>
        <div class="col-sm-4 col-lg-3 bg-light border">Col 3</div>
    </div>
  
    <div class="row">
        <div class="col-sm-4 col-lg-6 bg-light border">Col 1</div>
        <div class="col-sm-4 col-lg-3 bg-light border">Col 2</div>
        <div class="col-sm-4 col-lg-3 bg-light border">Col 3</div>
    </div>
  
</div>

result:

small screen 4 columns, large screen 6 columns

small screen 4 columns, large screen 3 columns

Col 1

Col 2

Col 3

Col 1

Col 2

Col 3

13-D. Grids - alignment

We can justify row on the page with justify-content-start , justify-content-center, justify-content-end

    <div class="container-lg my-5">
    <h5>Justifying columns left (start)</h5>
    
    <div class="row justify-content-start">
        <div class="col-3">
            <div class="p-3 bg-light border">col 1</div>
        </div>
        <div class="col-3">
            <div class="p-3 bg-light border">col 2</div>
        </div>
        <div class="col-3">
            <div class="p-3 bg-light border">col 3</div>
        </div>                
        
    </div>

    <div class="container-lg my-5">
        <h5>Justifying columns center </h5>
        
        <div class="row justify-content-center">
            <div class="col-3">
                <div class="p-3 bg-light border">col 1</div>
            </div>
            <div class="col-3">
                <div class="p-3 bg-light border">col 2</div>
            </div>
            <div class="col-3">
                <div class="p-3 bg-light border">col 3</div>
            </div>                
            
        </div>
        <div class="container-lg my-5">
            <h5>Justifying columns right (end)</52>
            
            <div class="row justify-content-end">
                <div class="col-3">
                    <div class="p-3 bg-light border">col 1</div>
                </div>
                <div class="col-3">
                    <div class="p-3 bg-light border">col 2</div>
                </div>
                <div class="col-3">
                    <div class="p-3 bg-light border">col 3</div>
                </div>                
                
            </div>
        </div>            
    </div>        
</div>

Justifying columns left (start)

col 1

col 2

col 3

Justifying columns center

col 1

col 2

col 3

Justifying columns right (end)

col 1

col 2

col 3

14. Grids and layout

Typical e-commerce product layout

Default behaviour:

hide image (d-none) on small screens
text-center
align image to center vertically (align-items-center). Other options: start, end, center, baseline, or stretch

when screen size is medium (md) or greater:

show image: display as block element (d-md-block)
align text left (text-md-start)

<section id="intro">
<div class="container-lg">
    <div class="row justify-content-center align-items-center"> 
        <div class="col-md-5 text-center text-md-start"> 
            <div class="display-3">Retro cellphone headset</div>     
            <h1>
            <div class="display-5 text-muted">For those who just cannot move on</div>   
            </h1>
            <p class="lead my-4 text-muted">Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat aliquid debitis voluptate nam, porro nisi, inventore itaque similique aliquam minus, sequi sint maxime assumenda est laboriosam. Dolor nostrum minima voluptatum error repellendus libero sunt quis, dignissimos, cum ea sit voluptates culpa laboriosam fugiat ullam eligendi aspernatur quos nulla quasi amet? Hic cumque minima ex.</p>
            <a href="#pricing" class="btn btn-secondary btn-lg">Buy now</a>
        </div>
        <div class="col-md-5 text-center d-none d-md-block">
            <img class="img-fluid" src="../phone.png" alt="retro phone">
        </div>
    </div>
</div>
</section>

Retro cellphone headset

For those who just cannot move on

Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat aliquid debitis voluptate nam, porro nisi, inventore itaque similique aliquam minus, sequi sint maxime assumenda est laboriosam. Dolor nostrum minima voluptatum error repellendus libero sunt quis, dignissimos, cum ea sit voluptates culpa laboriosam fugiat ullam eligendi aspernatur quos nulla quasi amet? Hic cumque minima ex.

Buy now

15. Cards

A bootsrap card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. Replaces panels, wells, and thumbnails from boostrap 3.

As screen size changes(lg-md-sm), we use more columns per card, hence fewer columns - 4 to 2 to 1

Card title: Andrzej

This card has supporting text below as a natural lead-in to additional content.

Card footer

Card title: Tadeusz

This card has supporting text below as a natural lead-in to additional content.

Card footer

Card title: Ignacy

This card has supporting text below as a natural lead-in to additional content.

Card footer

Card title: Adam

This card has supporting text below as a natural lead-in to additional content.

Card footer

16. Accordion

The Boostrap Accordion is a series of panels stacked on the top of each other. Accordion menus and widgets are widely used in the web applications to manage the large amount of content and navigation lists in a small amount area. With Bootstrap collapse plugin you can either create accordions or show and hide content without writing any JavaScript code. The accordion uses collapse internally to make it collapsible.

This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the fourth item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the fifth item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

17. List Groups

List Groups provide formatting for un-ordered lists

Using classes list-group and list-group-item

An item
A second item
A third item
A fourth item
And a fifth one

Indicating and active-item:

A first item
A second item
A third item: active item
A fourth item
And a fifth one

Using row and column classes to permit formatting:

An active item
A second item
A third item
A fourth item
And a fifth one

18. Icons

Bootstrap now includes over 1,300 high quality icons, which are available in SVGs, SVG sprite, or web fonts format. You can use them with or without Bootstrap in any project.

The advantage of using font icons is, you can create icons of any color just through applying the CSS color property. Also, to change the size of icons you can simply use the CSS font-size property.

headers to include:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">

Code:

<p><i class="bi-globe"></i> Hello, world!</p>

<p>Stars:<p>
<i class="bi-star-fill"></i>    
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
<i class="bi-star-half"></i>

<p>Arrows:<p>
<i class="bi-arrow-90deg-up"></i>
<i class="bi-arrow-90deg-down"></i>
<i class="bi-arrow-90deg-left"></i>
<i class="bi-arrow-90deg-right"></i>

Hello, world!

Stars:

Arrows:

18. Forms

An HTML form is used to collect user input. The user input is most often sent to a server for processing. Bootstap adds the the standard form with additional features.

Get in touch

Do you have a question to ask us ?

Email address
Name
What is your question about?

Your question...

Using input Groups in forms. Input groups allow you to extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.

Name

Address

Country

18. Tooltips

A tooltip is a message which appears when a cursor is positioned over an icon, image, hyperlink, or other element in a graphical user interface.

Tooltips rely on the 3rd party library Popper for positioning. You must include popper.min.js before bootstrap.js or use bootstrap.bundle.min.js / bootstrap.bundle.js which contains Popper in order for tooltips to work!
Tooltips are opt-in for performance reasons, so you must initialize them yourself.
Tooltips with zero-length titles are never displayed.
Specify container: 'body' to avoid rendering problems in more complex components (like our input groups, button groups, etc).
Triggering tooltips on hidden elements will not work.
Tooltips for .disabled or disabled elements must be triggered on a wrapper element.
When triggered from hyperlinks that span multiple lines, tooltips will be centered. Use white-space: nowrap; on your s to avoid this behavior.

Tooltips must be hidden before their corresponding elements have been removed from the DOM.

Tooltips can be triggered thanks to an element inside a shadow DOM.

examples:

code:

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
    Tooltip on top
</button>

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">
    Tooltip on right
</button>

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">
    Tooltip on bottom
</button>

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">
    Tooltip on left
</button>

javascript:

// activate tooltips
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
    return new bootstrap.Tooltip(tooltipTriggerEl)
})

Bootstrap 5: test h1

Bootstrap 5: test h2

Bootstrap 5: test h3

class="display-1"

class="display-2"

class="display-3"

class="display-4"

class="display-5"

class="display-6"

Justifying columns left (start)

Justifying columns center

Justifying columns right (end)

For those who just cannot move on

Card title: Andrzej

Card title: Tadeusz

Card title: Ignacy

Card title: Adam

Accordion Item #1

Accordion Item #2

Accordion Item #3

Accordion Item #4

Accordion Item #5

Using classes list-group and list-group-item

Indicating and active-item:

Using row and column classes to permit formatting:

Get in touch